<template>
  <div class="head-box">
    <div class="titleBar">
      <img src="../assets/image/titleBg.png" class="titleBg" alt="" />
      <div class="content flex fb">
        <div class="flex col fb font f18 bold c-f" style="height: 114px">
          <div class="top-bar left">{{ "项目级产品演示案例工程(勿修改)" }}</div>
          <div class="flex fb navBox leftNav" style="padding-right: 46px">
            <template v-for="(i, index) in navBar">
              <div
                class="nav font f18 flex aic col"
                :key="index"
                :class="i.active ? 'c-f' : 'c-4f'"
                v-if="index <= 5"
                @click="handleClick(index)"
              >
                {{ i.menu }}
                <div v-if="i.active" class="underLine"></div>
              </div>
            </template>
          </div>
        </div>
        <div class="title" @click="fullScreen">
          <div class="font f34 bold c-7c">
            BIM+智慧工地数据决策系统
          </div>
          <div class="font f18 bold c-f datetime">
            安全施工 <span class="font c-f8 f18">476</span>天
            <span class="font c-f8 f18">16</span>小时
            <span class="font c-f8 f18">48</span>分钟
          </div>
        </div>
        <div class="flex col fb font f18 bold c-f" style="height: 114px">
          <div class="top-bar right flex aic fd">
            <div class="time">{{ currentTime }}</div>
            <img class="headImg" src="../assets/image/head.png" alt="" />
          </div>
          <div class="flex fb navBox rightNav" style="padding-left: 43px">
            <template v-for="(i, index) in navBar">
              <div
                class="nav font f18 flex aic col"
                :key="index"
                :class="i.active ? 'c-f' : 'c-4f'"
                v-if="index > 5"
                @click="handleClick(index)"
              >
                {{ i.menu }}
                <div v-if="i.active" class="underLine"></div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import navBar from "../libs/navigate";
import moment from "moment";

export default {
  data() {
    return {
      navBar: [],
      currentTime: "",
      timeFun: null,
    };
  },
  computed: {
    routerPath() {
      var path = this.$route.path.slice(1);
      return path;
    },
    routerRoot() {
      // var root = this.$route.meta.root;
     
      return 1;
    },
  },
  mounted() {
    this.mountedHandler();
  },
  beforeDestroy() {
    window.clearInterval(this.timeFun);
  },
  methods: {
    mountedHandler() {
      window.clearInterval(this.timeFun);
      this.timeFun = window.setInterval(() => {
        var date = new Date();
        this.currentTime = moment(date).format("YYYY-MM-DD HH:mm:ss");
      }, 1000);
      this.navBar = navBar.map((item) => {
        return {
          menu: item.menu,
          active: false,
          routePath: item.routePath,
        };
      });
      this.navBar[0].active = true;
      this.$router.push(this.navBar[0].routePath);
    },
    handleClick(index) {
      this.navBar.forEach((item) => {
        item.active = false;
      });
      this.navBar[index].active = true;
      this.$router.push(this.navBar[index].routePath);
    },
  },
};
</script>

<style scoped lang='scss'>
.head-box {
  height: 140px;
}
.titleBar {
  width: 100%;
  height: 134px;
  background-size: 100%;
  background-repeat: no-repeat;
  .titleBg {
    height: auto;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
  }
  .title {
    margin-top: 13px;
    height: 48px;
    line-height: 48px;
    text-align: center;
  }
  .datetime {
    margin-top: 8px;
    height: 40px;
    line-height: 40px;
  }
  .headImg {
    width: 28px;
    height: 28px;
    margin-left: 20px;
  }
}

.content {
  position: relative;
  padding: 0;
  z-index: 10;
}
.top-bar {
  height: 50px;
  padding: 0 20px;
  line-height: 50px;
  &.right {
    text-align: right;
  }
}
.nav {
  cursor: pointer;
  height: 40px;

  line-height: 40px;
  user-select: none;
}
.nav:hover {
  color: #fff;
}
.underLine {
  width: 100%;
  height: 4px;
  background: #7ffafc;
  margin-top: -4px;
}
.navItemBox {
  background: #0d1d4e;
  margin: 0 20px 20px;
}
.leftNav {
  background: url(../assets/image/l-nav.png) no-repeat;
  background-size: 100% 100%;
  width: 634px;
}
.rightNav {
  background: url(../assets/image/r-nav.png) no-repeat;
  background-size: 100% 100%;
  width: 638px;
}
.navBox {
  padding: 0 20px;
  height: 40px;
  margin: 0 20px;
}
.navItem {
  padding: 0 20px;
  height: 44px;
  cursor: pointer;
  line-height: 44px;
  user-select: none;
}
.navItem:hover {
  color: #fff;
}
.navItem.inShadow {
  color: #fff;
  box-shadow: inset 0px 0px 11px 0px rgba(54, 255, 255, 0.78);
}
.time {
  font-family: "Courier New";
  font-size: 20px;
}
</style>